<template>
  <view class="container">
    <Loading :show="isLoading" />
    
    <!-- 优惠券列表 -->
    <view v-if="coupons.length > 0" class="coupon-list">
      <view v-for="(coupon, index) in coupons" :key="coupon.id" class="coupon-item">
        <view class="coupon-card">
          <!-- 左侧金额区域 -->
          <view class="coupon-left">
            <view class="amount-section">
              <text class="amount-symbol">¥</text>
              <text class="amount-value">{{ coupon.coupon.discount }}</text>
            </view>
            <text class="condition-text">满{{ coupon.coupon.minPoint }}元可用</text>
          </view>
          
          <!-- 右侧信息区域 -->
          <view class="coupon-right">
            <view class="coupon-header">
              <text class="coupon-title">{{ coupon.coupon.name }}</text>
              <view class="status-tag" :class="getStatusClass(coupon.status)">
                {{ getStatusText(coupon.status) }}
              </view>
            </view>
            
            <view class="coupon-info">
              <text class="coupon-desc">{{ getUseScopeText(coupon.coupon.useScope) }}</text>
              <text class="coupon-code">券码：{{ coupon.couponCode }}</text>
            </view>
            
            <view class="coupon-footer">
              <text class="expire-time">有效期至：{{ formatDate(coupon.expireTime) }}</text>
              <text class="get-time">领取时间：{{ formatDate(coupon.getTime) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else-if="!isLoading" class="empty-state">
      <image class="empty-image" src="/static/empty-coupon.png" mode="aspectFit"></image>
      <text class="empty-text">您还没有优惠券</text>
      <text class="empty-desc">快去领取优惠券吧</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getUserCouponList } from '@/api/coupon/user';
import Loading from '@/components/Loading.vue';

interface Coupon {
  id: number;
  userId: number;
  couponId: number;
  couponCode: string;
  couponName: string;
  status: number;
  getTime: string;
  expireTime: string;
  useTime: string | null;
  getType: number;
  createTime: string;
  updateTime: string;
  coupon: {
    id: number;
    name: string;
    code: string;
    type: number;
    discount: number;
    minPoint: number;
    useScope: number;
    startTime: string | null;
    endTime: string | null;
    status: number;
    createTime: string;
    updateTime: string;
  };
}

const coupons = ref<Coupon[]>([]);
const isLoading = ref(false);

// 获取优惠券数据
const fetchCoupons = async () => {
  try {
    isLoading.value = true;
    
    // 获取当前用户ID
    const userInfo = uni.getStorageSync('userInfo');
    if (!userInfo || !userInfo.id) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      return;
    }
    
    const res = await getUserCouponList({
      pageNum: 1,
      pageSize: 50,
      userId: userInfo.id
    });
    if (res.rows && res.rows.length > 0) {
      coupons.value = res.rows;
    } else {
      coupons.value = [];
    }
  } catch (error) {
    uni.showToast({
      title: '获取优惠券失败',
      icon: 'none'
    });
    coupons.value = [];
  } finally {
    isLoading.value = false;
  }
};

// 获取使用范围文本
const getUseScopeText = (useScope: number) => {
  const scopeMap: { [key: number]: string } = {
    1: '全场通用',
    2: '指定商品',
    3: '指定分类'
  };
  return scopeMap[useScope] || '全场通用';
};

// 获取状态文本
const getStatusText = (status: number) => {
  const statusMap: { [key: number]: string } = {
    0: '未使用',
    1: '已使用',
    2: '已过期'
  };
  return statusMap[status] || '未知状态';
};

// 获取状态样式类
const getStatusClass = (status: number) => {
  const classMap: { [key: number]: string } = {
    0: 'status-unused',
    1: 'status-used',
    2: 'status-expired'
  };
  return classMap[status] || 'status-unused';
};

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN');
};

onMounted(() => {
  fetchCoupons();
});

onShow(() => {
  fetchCoupons();
});
</script>

<style>
.container {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.coupon-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.coupon-item {
  margin-bottom: 15px;
}

.coupon-card {
  display: flex;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.coupon-left {
  width: 140px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: #ffffff;
  padding: 15px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.coupon-left::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #f5f5f5;
}

.amount-section {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 6px;
}

.amount-symbol {
  font-size: 18px;
  font-weight: bold;
  margin-right: 2px;
}

.amount-value {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
}

.condition-text {
  font-size: 11px;
  opacity: 0.9;
  text-align: center;
}

.coupon-right {
  flex: 1;
  padding: 15px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.coupon-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.coupon-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex: 1;
  margin-right: 10px;
}

.status-tag {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

.status-unused {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
}

.status-used {
  background: linear-gradient(135deg, #999 0%, #666 100%);
}

.status-expired {
  background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
}

.coupon-info {
  margin-bottom: 8px;
}

.coupon-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
  display: block;
}

.coupon-code {
  font-size: 11px;
  color: #999;
  background-color: #f8f9fa;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-block;
}

.coupon-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.expire-time,
.get-time {
  font-size: 11px;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.empty-image {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.empty-text {
  font-size: 18px;
  color: #666;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: #999;
}
</style> 